<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书库</title>
    <style>
        body{font-size: 45px;}
        body>img:first-child{width: 100%;height: 62px;}
        div:nth-child(2){background-color: #ffd8b1;width: 100%;height: 100px;margin-top: -13px;text-align: center;border:1px solid transparent;}
        div:nth-child(2)>div{width: 86%;border-radius:14px;background-color: white;margin: auto;margin-top: 9px;height:74px;}
        input{vertical-align: middle;width: 50%;height: 60px;font-size: 39px;margin-top: -11px;border:none;outline:none;}
        div:nth-child(2)>div>img{width: 36px;height: 41px;margin-top: 16px;}
        img:nth-child(3){width: 100%;}
        div:nth-child(4){width: 100%;background-color: #e4e4e4;height: 150px;margin-top: -13px;border:1px solid transparent;}
        div:nth-child(4)>div{width: 100%;height: 110px;background-color: white;margin-top: 20px;}
        div:nth-child(4)>div>span{width: 49.949%;text-align: center;background-color: white;height: 80px;display: inline-block;margin-top: 21px;line-height:80px;vertical-align: middle;}
        div:nth-child(4)>div>span>img{width: 50px;height: 50px;vertical-align: sub;}
        div:nth-child(4)>div>span:last-child{border-left: 1px solid grey;}
        div:nth-child(5)>div:first-child{width: 100%;}
        div:nth-child(5)>div:first-child{width: 100%;height: 140px;background-color: white;line-height: 140px;border-bottom:1px solid #a2a2a2;}
        div:nth-child(5)>div:first-child>span:first-child{float: left;font-size: 40px;font-weight: bold;margin-left: 10%;}
        div:nth-child(5)>div:first-child>span:last-child{float: right;margin-right: 10%;font-size: 37px;}

        div:nth-child(5)>div.two{width: 100%;height: 150px;background-color: white;border-bottom: 1px solid #a2a2a2;}
        div:nth-child(5)>div.two>span{width: 49.949%;text-align: center;background-color: white;height: 80px;display: inline-block;margin-top: 36px;line-height:80px;vertical-align: middle;}
        div:nth-child(5)>div.two>span>img{width: 50px;height: 50px;vertical-align: sub;}
        div:nth-child(5)>div.two>span:last-child{border-left: 1px solid grey;}

        div:nth-child(5)>div.three{width: 100%;height: 150px;background-color: white;border-bottom: 1px solid #a2a2a2;margin-top: 1px;}
        div:nth-child(5)>div.three>span{width: 49.949%;text-align: center;background-color: white;height: 80px;display: inline-block;margin-top: 36px;line-height:80px;vertical-align: middle;}
        div:nth-child(5)>div.three>span>img{width: 50px;height: 50px;vertical-align: sub;}
        div:nth-child(5)>div.three>span:last-child{border-left: 1px solid grey;}

        div:nth-child(5)>div.four{width: 100%;height: 150px;background-color: white;border-bottom: 1px solid #a2a2a2;}
        div:nth-child(5)>div.four>span{width: 49.949%;text-align: center;background-color: white;height: 80px;display: inline-block;margin-top: 36px;line-height:80px;vertical-align: middle;}
        div:nth-child(5)>div.four>span>img{width: 50px;height: 50px;vertical-align: sub;}
        div:nth-child(5)>div.four>span:last-child{border-left: 1px solid grey;}
        .clearfix{clear: both;}

        div:nth-child(6)>div:first-child{width: 100%;height: 140px;background-color: white;line-height: 140px;border-bottom:1px solid #a2a2a2;}
        div:nth-child(6)>div:first-child>span:first-child{float: left;font-size: 40px;font-weight: bold;margin-left: 10%;}
        div:nth-child(6)>div:first-child>span:last-child{float: right;margin-right: 10%;font-size: 37px;}

        div:nth-child(6)>div.two{width: 100%;height: 150px;background-color: white;border-bottom: 1px solid #a2a2a2;}
        div:nth-child(6)>div.two>span{width: 49.949%;text-align: center;background-color: white;height: 80px;display: inline-block;margin-top: 36px;line-height:80px;vertical-align: middle;}
        div:nth-child(6)>div.two>span>img{width: 50px;height: 50px;vertical-align: sub;}
        div:nth-child(6)>div.two>span:last-child{border-left: 1px solid grey;}

        ul{background-color:white;list-style-type: none;padding: 0;margin: 0;border-top:1px solid #c8c8c8;position:fixed;bottom:0;width: 100%;}
        ul>li{float: left;width: 22%;margin-left: 2.4%;text-align: center;font-size: 28px;}
        p{margin: 11px 0;color: #696969;}
        ul>li>img{width: 65px;height: 65px;}
    </style>
</head>
<body>
    <img src="./images/精选_01.jpg">
    <div><div><img src="./images/书库_03.png">&nbsp;&nbsp;&nbsp;<input type="search"placeholder="请输入书名或作者名"></div></div>
    <img src="./images/书库_06.png">
    <div><div><span><img src="./images/书库_09.png">&nbsp;&nbsp;所有书籍</span><span><img src="./images/书库_12.png">&nbsp;&nbsp;热门标签</span></div></div>
    <div>
        <div><span>原创女生</span><span>排行榜</span></div><span class="clearfix"></span>
        <div class="two"><span><img src="./images/书库_17.png">&nbsp;&nbsp;现代言情</span><span><img src="./images/书库_19.png">&nbsp;&nbsp;玄幻仙侠</span></div>
        <div class="three"><span><img src="./images/书库_23.png">&nbsp;&nbsp;青春校园</span><span><img src="./images/书库_24.png">&nbsp;&nbsp;高干军婚</span></div>
        <div class="four"><span><img src="./images/书库_27.png">&nbsp;&nbsp;古言穿越</span><span><img src="./images/书库_28.png">&nbsp;&nbsp;纯爱同人</span></div>
    </div>
    <div>
        <div><span>原创男生</span><span>排行榜</span></div><span class="clearfix"></span>
        <div class="two"><span><img src="./images/书库_32.png">&nbsp;&nbsp;东方玄幻</span><span><img src="./images/书库_34.png">&nbsp;&nbsp;异术超能</span></div>
    </div>
    <ul>
        <li><img src="./images/书架_17.png"><br/>精选</li>
        <li><img src="./images/书库_39.png"><br/>书库</li>
        <li><img src="./images/精选_35.jpg"><br/>书架</li>
        <li><img src="./images/精选_37.jpg"><br/>我的</li>
    </ul>
</body>
</html>